<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogFormVisible"
    :append-to-body="body"
    top="250px"
    style="min-width:500px"
    :show-close="show"
    :on-remove="remove"
  >
    <el-form
      ref="dataForm"
      :rules="rules"
      :model="temp"
      label-position="left"
      label-width="70px"
      style="width: 400px; margin-left:50px;"
    >
      <el-form-item label="类型名称" prop="typename">
        <el-input v-model="temp.typename" />
      </el-form-item>
      <el-form-item label="类型简介" prop="intro">
        <el-input v-model="temp.intro" />
      </el-form-item>
      <el-form-item label="类型图片" prop="typeimg">
        <el-upload
          class="upload-demo"
          multiple
          :limit="limit"
          :on-exceed="handleExceed"
          action="xxx"
          :file-list="fileList"
          :on-change="changeFile"
          :auto-upload="false"
        >
          <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>
      </el-form-item>
      <div>
        <el-button @click="closeDialog">
          取消
        </el-button>
        <el-button
          type="primary"
          @click="title === '新建类型' ? createData() : updateData()"
        >
          提交
        </el-button>
      </div>
    </el-form>
  </el-dialog>
</template>

<script>
export default {
  name: "TypeDialog",
  props: {
    title: String,
    dialogFormVisible: Boolean,
    row: Object
  },
  watch: {
    row() {
      this.temp.typename = this.row.typename;
      this.temp.intro = this.row.intro;
    }
  },
  data() {
    const validateTypeName = (rule, value, callback) => {
      if (!value) {
        callback(new Error("类型不允许为空"));
      } else {
        callback();
      }
    };
    const validateIntro = (rule, value, callback) => {
      if (!value) {
        callback(new Error("类型简介不允许为空"));
      } else {
        callback();
      }
    };
    return {
      temp: {
        typename: "",
        intro: ""
      },
      file: "",
      rules: {
        typename: [{ validator: validateTypeName, trigger: "blur" }],
        intro: [{ validator: validateIntro, trigger: "blur" }]
      },
      limit: 1,
      fileList: [],
      body: true,
      show: false
    };
  },
  methods: {
    createData() {
      this.$refs.dataForm.validate(valid => {
        if (valid) {
          if (this.fileList.length <= 0) {
            this.$message.warning("请选择类型图片！");
            return;
          } else {
            let typeName = this.temp.typename,
              intro = this.temp.intro,
              file = this.fileList[0].raw;
            this.$emit("createData", { typeName, intro, file });
            this.initData();
          }
        }
      });
    },
    changeFile(file, fileList) {
      this.fileList = fileList;
    },
    updateData() {
      this.$refs.dataForm.validate(valid => {
        if (valid) {
          if (this.fileList.length <= 0) {
            let typeName = this.temp.typename,
              intro = this.temp.intro;

            this.$emit("updateData", { typeName, intro });
            this.initData();
          } else {
            let typeName = this.temp.typename,
              intro = this.temp.intro,
              file = this.fileList[0].raw;
            this.$emit("updateData", { typeName, file, intro });
            this.initData();
          }
        }
      });
    },
    initData() {
      this.temp.typename = "";
      this.temp.intro = "";
      this.file = "";
      this.fileList = [];
    },
    handleExceed() {
      this.$message.warning("只允许上传一个图片文件");
    },
    closeDialog() {
      this.temp.typename = "";
      this.temp.intro = "";
      this.file = "";
      this.fileList = [];
      this.$emit("closeDialog");
    },
    remove() {
      this.file = "";
      this.fileList = [];
    }
  }
};
</script>

<style>
</style>